<template>
    <li class="search-list__li" :class="{active: active === item.id}">
        <div class="search-list__li-body">
            <div class="search-list__li-col" :style="{ opacity: item.name ? 1:0 }">
                <div class="search-list__li-name" @click.stop="handleClick('click')">
                    {{ item.name || "-" }}
                </div>
                <div class="search-list__li-value">
                    <el-button type="text" title="编辑" icon="el-icon-edit" @click.stop="handleClick('edit')"></el-button>
                    <el-button type="text" title="删除" class="red" icon="el-icon-delete" @click.stop="handleClick('remove')"></el-button>
                </div>
            </div>
            <div class="search-list__li-col edit-row" :class="{ editing: editState, error: hasError }">
                <div class="search-list__li-name">
                    <el-input
                        placeholder="请输入"
                        ref="inputRef"
                        @input="handleInputChange"
                        @keyup.enter.native.stop="handleClick('save')"
                        v-model="editValue">
                    </el-input>
                </div>
                <div class="search-list__li-value">
                    <el-button type="text" title="保存" icon="el-icon-check" @click.stop="handleClick('save')"></el-button>
                    <el-button type="text" title="取消" icon="el-icon-close" @click.stop="handleClick('cancel')"></el-button>
                </div>
                <div class="search-list__li-tip">该项为必填项</div>
            </div>
        </div>
    </li>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

@Component
export default class DataItem extends Vue {
    @Prop({
        type: Object,
        default: () => {
            return {};
        }
    })
    readonly item!: any;

    @Prop({
        type: [String, Number],
        default: ""
    })
    readonly active!: string|number;

    editValue = "";
    editState = false;
    hasError = false;
    handleClick(type: any) {
        this.handleEdit(type);
        this.handleCancel(type);
        this.handleSave(type);
        this.$emit("item-click", this, {
            editValue: this.editValue,
            item: this.item,
            type
        });
    }

    handleEdit(type: any) {
        if (type !== 'edit') return;
        this.editValue = this.item.name;
        this.editState = true;
        const inputRef: any = this.$refs.inputRef;
        inputRef.focus && inputRef.focus();
    }

    handleCancel(type: any) {
        if (type !== 'cancel') return;
        this.close();
    }

    handleSave(type: any) {
        if (type !== 'save') return;
        this.editValue = this.editValue.trim();
        this.handleInputChange();
    }

    close() {
        const inputRef: any = this.$refs.inputRef;
        inputRef.blur && inputRef.blur();
        this.editValue = "";
        this.editState = false;
        this.hasError = false;
        this.$emit("item-close", {
            editValue: this.editValue,
            item: this.item,
            type: "close"
        });
    }

    handleInputChange() {
        this.hasError = this.editValue === "";
    }
}
</script>
